
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Brain } from "lucide-react";
import { useRole } from "@/contexts/RoleContext";

const strengthsIdentified = [
  "Analytical Thinking",
  "Creative Problem Solving", 
  "Supportive Collaboration",
  "Visual Learning"
];

export function StrengthsResults() {
  const { role } = useRole();

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-lg">
          <Brain className="w-5 h-5 text-purple-600" />
          Strengths Discovery Results
        </CardTitle>
        <CardDescription>Assessment completed on April 22, 2025</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <div className="bg-purple-50 p-4 rounded-lg border border-purple-200">
            <h4 className="font-semibold text-lg mb-2 text-purple-900">
              {role === 'teacher' ? 'Creative Facilitator' : 'Creative Contributor'}
            </h4>
            <p className="text-sm text-purple-700 mb-3">
              {role === 'teacher'
                ? "You excel at creating engaging learning environments and facilitating meaningful discussions. Your innovative approach helps students discover knowledge through creative exploration and collaboration."
                : "You excel at generating innovative solutions and bringing fresh perspectives to challenges. Your collaborative nature enhances team creativity and problem-solving effectiveness."
              }
            </p>
          </div>
          
          <div className="space-y-3">
            <h5 className="font-medium">Your Core Strengths:</h5>
            <div className="grid grid-cols-2 gap-2">
              {strengthsIdentified.map(strength => (
                <Badge key={strength} className="bg-purple-100 text-purple-800 justify-center">
                  {strength}
                </Badge>
              ))}
            </div>
          </div>

          <div className="space-y-2">
            <h5 className="font-medium">Development Opportunities:</h5>
            <ul className="text-sm text-muted-foreground space-y-1 ml-4">
              {role === 'teacher' ? (
                <>
                  <li>• Design innovative curriculum and lesson plans</li>
                  <li>• Mentor other educators in creative teaching methods</li>
                  <li>• Lead professional development workshops</li>
                  <li>• Explore interdisciplinary teaching approaches</li>
                </>
              ) : (
                <>
                  <li>• Lead creative brainstorming sessions</li>
                  <li>• Explore cross-disciplinary projects</li>
                  <li>• Mentor others in creative problem-solving</li>
                  <li>• Develop systematic approaches to innovation</li>
                </>
              )}
            </ul>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
